<!-- 联系客服车页面 -->
<template>
  <div class="CustomerService">

    <!-- 顶部导航栏 吸顶 -->
    <van-sticky>
      <van-nav-bar title="我的客服">
        <template #left>
          <van-icon name="arrow-left" color="#fff" @click="goBack">返回</van-icon>
        </template>
      </van-nav-bar>
    </van-sticky>

    <!-- 聊天区域 -->
    <div class="content">
      <div class="content-right">
        <div class="dialogue">
          <span>您好!</span>
        </div>
        <img :src="avatar" alt="">
      </div>
      <div class="content-left">
        <img :src="require('@/assets/headPortrait/0.jpg')" alt="">
        <div class="dialogue">
          <span>您好!很高兴为您服务!!</span>
        </div>
      </div>
      <div v-for="(item, i) of customerServiceList" :key="i">
        <!-- 右侧 -->
        <div class="content-right" v-if="item.me">
          <div class="dialogue" v-if="item.showState">
            <van-popover v-model="showPopover[i]" theme="dark" trigger="click" :actions="actions" @select="onSelect(i)"> 
              <template #reference>
                <span v-html="item.text"></span>
              </template>
            </van-popover>
          </div>
          <div class="revocation" v-else>
            <span>你撤回了一条消息</span>
          </div>
          <img :src="avatar" alt="" v-if="item.showState">
        </div>
        <!-- 左侧  -->
        <div class="content-left" v-else>
          <img :src="require('@/assets/headPortrait/0.jpg')" alt="">
          <div class="dialogue">
            <span v-html="item.text"></span>
          </div>
        </div>
      </div>
    </div>

    <!-- 输入区 发送 -->
    <div class="sendOut">
      <van-field v-model="sms" @keyup.native.enter="sendOut" placeholder="您好，您遇到什么问题了？" right-icon="smile-o" @click-right-icon="emoticonPopup">
        <template #button>
          <van-button size="small" type="primary" @click="sendOut">发送</van-button>
        </template>
      </van-field>
    </div>

    <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
      <van-grid :border="false" :column-num="8">
        <van-grid-item v-for="(value,index) in emoticon" :key="index" :text="value" @click="checked(value)"/>
      </van-grid>
    </van-popup>
  </div>
</template>

<script>
import { Toast } from 'vant';
import { mapState } from "vuex";
import { axios_message } from "@/api/data_axios";
export default {
  data() {
    return {
      sms: "", // 输入区内容
      // arr:[ // 客服名字
      //   "阿离","云樱","玉环","婉儿","媚娘","李白","奕星","元芳",
      //   "狄大人","小老虎","钟馗","小金金","司空大人"
      // ],
      list: [], // 聊天数据
      show: false,
      emoticon:[ // 表情
        "😀","😆","😅","🤣","😂","🙂","🙃","😉",
        "😊","😇","🥰","😍","🤩","😘","👋","🤚",
        "🖐️","✋","🖖","👌","🤏","✌️","🤞","👍",
      ],
      showPopover: [],
      actions: [{ text: '撤回' }],
    };
  },
  computed:{
    ...mapState(["customerServiceList","avatar"]),
    // num(){
    //   // 按小时分配客服
    //   let myDate = new Date();
    //   let hour = myDate.getHours();       //获取当前小时数(0-23)
    //   return hour > 11 ? hour-12 : hour; 
    // },
  },
  mounted(){
    this.list = this.customerServiceList;
  },
  methods: {
    // 选择表情弹窗
    emoticonPopup(){
      // this.show = true;
    },
    // 选中事件
    checked(a){
      this.show = false;
      this.sms += a;
    },
    onSelect(num) {
      this.$store.commit("upServiceState", num);
    },
    // 返回
    goBack() {
      this.$router.go(-1);
    },
    // 发送信息
    sendOut() {
      if (this.sms.trim().length) {
        let data ={
          app_key : 'd4ccd64d-ef9f-48d8-b8a0-1af84fc0808d',
          user_id : '1',
          q : this.sms.trim(),
        }
        this.list.push({ text:this.sms.trim(),showState:true,me:true });
        axios_message(data).then((res) => {
            this.list.push({ text:res.result.intents[0].outputs[1].property.text,showState:true,me:false });
            this.$store.commit("CustomerService", this.list);
            this.sms = "";
        });
      }else{
        Toast.fail('您还没有输入哦~');
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.CustomerService {
  .van-nav-bar {
    background-color: $base-color;
    ::v-deep .van-nav-bar__title{
      font-weight: bold;
    }
    .van-icon{
      font-weight: bold;
    }
  }
  .content{
    height: 82vh;
    overflow: auto;
    &-right{
      margin: 5px 5px 0 5px;
      position: relative;
      .dialogue{
        display: flex;
        justify-content: flex-end;
        padding: 7px 0;
        margin: 0 50px 0 5px;
        text-align: justify;
        span{
          padding: 5px;
          background: lawngreen;
          border-radius: 5px;
          word-wrap: break-word;
          max-width: 80vw;
        }
        &::before {
          position: absolute;
          right: 44px;
          top: 12px;
          content: "";
          border-top: 11px solid transparent;
          border-left: 11px solid lawngreen;
          border-bottom: 11px solid transparent;
        }
        /* &::before{
          height:0px;
          width:0px;
          content:"\00a0";
          border-width:8px;
          border-style:solid;
          border-color:#D6D1FF transparent transparent transparent;
          position: absolute;
          left: 515px;
          top: 47px;
        } */
      }
      .revocation{
        text-align: center;
        padding-bottom: 8px;
        span{
          background: rgb(237,237,237);
          padding: 5px;
          font-size: 12px;
        }
      }
      img{
        width: 37px;
        position: absolute;
        top: 0;
        right: 0;
      }
    }
    &-left{
      margin: 5px 5px 0 5px;
      position: relative;
      img{
        width: 37px;
        position: absolute;
      }
      .dialogue{
        display: flex;
        padding: 7px 0;
        margin-left: 50px;
        text-align: justify;
        margin-right: 5px;
        span{
          padding: 5px;
          background: deepskyblue;
          border-radius: 5px;
          word-wrap: break-word;
          max-width: 80vw;
        }
        &::before {
          position: absolute;
          left: 44px;
          top: 12px;
          content: "";
          border-top: 11px solid transparent;
          border-right: 11px solid deepskyblue;
          border-bottom: 11px solid transparent;
        }
      }
    }
  }
  .sendOut{
    width: 100%;
    position: fixed;
    bottom: 5px;
    ::v-deep .van-icon{
      font-size: 27px;
    }
  }
  ::v-deep .van-grid-item__text{
    font-size: 20px;
  }
}
</style>
